;(function() {
    // 姝ラ1锛氬垱寤篹charts瀹炰緥
    let myChart = echarts.init(document.querySelector('.pc-r1'))

    // 姝ラ2锛氬畾涔夐厤缃紙鎸囧畾鍥捐〃鐨勯厤缃」鍜屾暟鎹級
    let angle = 0;  // 瑙掑害锛岀敤鏉ュ仛绠€鍗曠殑鍔ㄧ敾鏁堟灉鐨�
    let value = 23; // 鍥句笂瑙掑害鏁版嵁
    let option = {
        // 鏍囬
        title: [
          {
              text: value+'%',
              x: 'center',
              top: '33%',
              left: 45,
              textStyle: {
                  color: '#fff',
                  fontSize: 40,
                  fontWeight: 'bold',
              },
          },
          {
              text: '会员人数比',
              x: 'center',
              top: '55%',
              textStyle: {
                  color: '#fff',
                  fontSize: 12,
              },
          },
      ],
      series: [
        {
          type: "custom",
          coordinateSystem: "none",
          renderItem: function (params, api) {
            return {
              type: "arc",
              shape: {
                cx: api.getWidth() / 2,
                cy: api.getHeight() / 2,
                r: (Math.min(api.getWidth(), api.getHeight()) / 1.6) * 0.65,
                startAngle: ((0 + -angle) * Math.PI) / 180,
                endAngle: ((360 + -angle) * Math.PI) / 180,
              },
              style: {
                stroke: "#ff6e1b",
                fill: "transparent",
                lineWidth: 1,
              },
              silent: true,
            };
          },
          data: [0],
        },
        {
          type: "pie",
          radius: ["75%", "60%"],
          silent: true,
          clockwise: true,
          startAngle: 90,
          z: 0,
          zlevel: 0,
          label: {
            normal: {
              position: "center",
            },
          },
          data: [
            {
              value: value,
              name: "",
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgb(255, 128, 0)", // 0% 
                      },
                      {
                        offset: 1,
                        color: "rgba(200, 106, 255, 0.8)", // 100% 
                      },
                    ],
                  },
                },
              },
            },
            {
              value: 100 - value,
              name: "",
              label: {
                normal: {
                  show: false,
                },
              },
              itemStyle: {
                normal: {
                  color: 'rgba(237, 119, 55, 0.2)',
                },
              },
            },
          ],
        }
      ],
    };

    myChart.setOption(option)


    window.addEventListener('resize', () => {
        myChart.resize()
    })
})()